

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>评分</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../../../layui/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../../../layui/style/admin.css" media="all">
    </head>
    <body>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">基础效果</div>
                        <div class="layui-card-body">
                            <div id="test-rate-dome1"></div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">显示文字</div>
                        <div class="layui-card-body">
                            <div id="test-rate-dome2"></div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">半星效果</div>
                        <div class="layui-card-body">
                            <div id="test-rate-dome3"></div>
                            <div><div id="test-rate-dome4"></div></div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">自定义主题色</div>
                        <div class="layui-card-body">
                            <ul>
                                <li><div id="test-rate-dome10"></div></li>
                                <li><div id="test-rate-dome11"></div></li>
                                <li><div id="test-rate-dome12"></div></li>
                                <li><div id="test-rate-dome13"></div></li>
                                <li><div id="test-rate-dome14"></div></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">只读</div>
                        <div class="layui-card-body">
                            <div id="test-rate-dome9"></div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">自定义内容</div>
                        <div class="layui-card-body">
                            <div id="test-rate-dome5"></div>
                            <div><div id="test-rate-dome6"></div></div> 
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">自定义长度</div>
                        <div class="layui-card-body">
                            <div id="test-rate-dome7"></div>
                            <div><div id="test-rate-dome8"></div></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <script src="../../../layui/layui/layui.js"></script>  
        <script>
            layui.config({
                base: '../../../layuiadmin/' //静态资源所在路径
            }).extend({
                index: 'lib/index' //主入口模块
            }).use(['index', 'rate'], function () {
                var rate = layui.rate;
                //基础效果
                rate.render({
                    elem: '#test-rate-dome1'
                })

                //显示文字
                rate.render({
                    elem: '#test-rate-dome2'
                    , value: 2 //初始值
                    , text: true //开启文本
                });

                //半星效果
                rate.render({
                    elem: '#test-rate-dome3'
                    , value: 2.5 //初始值
                    , half: true //开启半星
                })
                rate.render({
                    elem: '#test-rate-dome4'
                    , value: 3.5
                    , half: true
                    , text: true
                })

                //自定义文本
                rate.render({
                    elem: '#test-rate-dome5'
                    , value: 3
                    , text: true
                    , setText: function (value) { //自定义文本的回调
                        var arrs = {
                            '1': '极差'
                            , '2': '差'
                            , '3': '中等'
                            , '4': '好'
                            , '5': '极好'
                        };
                        this.span.text(arrs[value] || (value + "星"));
                    }
                })
                rate.render({
                    elem: '#test-rate-dome6'
                    , value: 1.5
                    , half: true
                    , text: true
                    , setText: function (value) {
                        this.span.text(value);
                    }
                })

                //自定义长度
                rate.render({
                    elem: '#test-rate-dome7'
                    , length: 3
                });
                rate.render({
                    elem: '#test-rate-dome8'
                    , length: 10
                    , value: 8 //初始值
                });

                //只读
                rate.render({
                    elem: '#test-rate-dome9'
                    , value: 4
                    , readonly: true
                });

                //主题色
                rate.render({
                    elem: '#test-rate-dome10'
                    , value: 3
                    , theme: '#FF8000' //自定义主题色
                });
                rate.render({
                    elem: '#test-rate-dome11'
                    , value: 3
                    , theme: '#009688'
                });

                rate.render({
                    elem: '#test-rate-dome12'
                    , value: 2.5
                    , half: true
                    , theme: '#1E9FFF'
                })
                rate.render({
                    elem: '#test-rate-dome13'
                    , value: 2.5
                    , half: true
                    , theme: '#2F4056'
                });
                rate.render({
                    elem: '#test-rate-dome14'
                    , value: 2.5
                    , half: true
                    , theme: '#FE0000'
                })
            });
        </script>
    </body>
</html>